<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="订单总数"
        :value="localStats.totalOrders"
        icon="Document"
        color="#1890ff"
        :trend="localStats.orderTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="待处理订单"
        :value="localStats.pendingOrders"
        icon="Clock"
        color="#fa8c16"
        :trend="localStats.pendingOrderTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="已完成订单"
        :value="localStats.completedOrders"
        icon="Check"
        color="#52c41a"
        :trend="localStats.completedOrderTrend"
        class="stat-card-hover"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="今日新增"
        :value="localStats.todayOrders"
        icon="Plus"
        color="#722ed1"
        :trend="localStats.todayOrderTrend"
        class="stat-card-hover"
      />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import StatCard from '@/components/StatCard.vue'

// 更新接口定义以匹配新的统计数据结构
interface SalesOrderStats {
  totalOrders: number
  pendingOrders: number
  completedOrders: number
  todayOrders: number
  orderTrend: number
  pendingOrderTrend: number
  completedOrderTrend: number
  todayOrderTrend: number
}

const props = defineProps<{
  stats: SalesOrderStats
}>()

// 使用本地计算属性确保数据正确传递
const localStats = computed(() => props.stats)
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}

/* 统计卡片悬停效果 */
.stat-card-hover {
  transition: all 0.3s ease;
}

.stat-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .stats-row {
    margin-bottom: 16px;
  }
  
  .stat-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  }
}
</style>